<template>
	<el-card shadow="hover">
		<el-divider content-position="left">开发素材配置</el-divider>
		<image-upload-cOS v-model="material" :maxLength="50" isMaterial />
		<!-- <el-divider content-position="left">基本配置</el-divider>
		<el-form ref="baiscFormRef" :model="basicForm" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="余额支付">
						<el-radio-group v-model="basicForm.list.balance_payment">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitBasicForm" :loading="submitBasicLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form> -->
		<el-divider content-position="left">首页分享图配置</el-divider>
		<el-form ref="indexShareFormRef" :model="indexShareForm" label-width="auto">
			<el-row class="mb20">
				<el-col>
					<el-form-item>
						<template #label>
							首页分享图<br />
							宽高比例5:4<br />
							大小不超过1M
						</template>
						<image-upload-cOS v-model="indexShareForm.list.url" path="basis" ref="imageUploadIndexShareRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitIndexShareForm" :loading="submitIndexShareLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left">品牌方配置</el-divider>
		<el-form ref="indexShareFormRef" :model="brandPartyForm" label-width="auto">
			<el-row class="mb20">
				<el-col>
					<el-form-item>
						<template #label>
							品牌方图片<br />
							宽750,高1000以内<br />
							大小不超过1M
						</template>
						<image-upload-cOS v-model="brandPartyForm.list.url" path="basis" ref="imageUploadBrandPartyRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitBrandPartyForm" :loading="submitBrandPartyLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left">订单配置</el-divider>
		<el-form ref="orderFormRef" :model="orderForm" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="待付款自动关闭时间">
						<el-input v-model.number="orderForm.list.ORDERDQ_CREATE" placeholder="请输入待付款自动关闭时间">
							<template #append>
								<el-select v-model="orderForm.list.ORDERDQ_CREATE_UNIT" class="group__append">
									<el-option label="秒" :value="1" />
									<el-option label="分" :value="60" />
									<el-option label="时" :value="3600" />
									<el-option label="天" :value="86400" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发货自动确认收货时间">
						<el-input v-model.number="orderForm.list.ORDERDQ_SEND" placeholder="请输入发货自动确认收货时间">
							<template #append>
								<el-select v-model="orderForm.list.ORDERDQ_SEND_UNIT" class="group__append">
									<el-option label="秒" :value="1800" />
									<el-option label="分" :value="60" />
									<el-option label="时" :value="3600" />
									<el-option label="天" :value="86400" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="确认收货自动结算时间">
						<el-input v-model.number="orderForm.list.ORDERDQ_OVER" placeholder="请输入确认收货自动结算时间">
							<template #append>
								<el-select v-model="orderForm.list.ORDERDQ_OVER_UNIT" class="group__append">
									<el-option label="秒" :value="1" />
									<el-option label="分" :value="60" />
									<el-option label="时" :value="3600" />
									<el-option label="天" :value="86400" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="售后可维权时间">
						<el-input v-model.number="orderForm.list.ORDERDQ_AFTER" placeholder="请输入售后可维权时间">
							<template #append>
								<el-select v-model="orderForm.list.ORDERDQ_AFTER_UNIT" class="group__append">
									<el-option label="秒" :value="1800" />
									<el-option label="分" :value="60" />
									<el-option label="时" :value="3600" />
									<el-option label="天" :value="86400" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitOrderForm" :loading="submitOrderLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left">分销商提现配置</el-divider>
		<el-form ref="withdrawalFormRef" :model="withdrawalForm" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="允许提现时间">
						<el-checkbox-group v-model="withdrawalForm.list.date" :min="1">
							<el-checkbox label="0">星期天</el-checkbox>
							<el-checkbox label="1">星期一</el-checkbox>
							<el-checkbox label="2">星期二</el-checkbox>
							<el-checkbox label="3">星期三</el-checkbox>
							<el-checkbox label="4">星期四</el-checkbox>
							<el-checkbox label="5">星期五</el-checkbox>
							<el-checkbox label="6">星期六</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="最小提现金额">
						<el-input-number v-model="withdrawalForm.list.money" :min="0.1" :precision="2" :controls="false" class="w100" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="手续费">
						<el-input v-model="withdrawalForm.list.rate" disabled class="w90" />
						元/一笔
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitWithdrawalForm" :loading="submitWithdrawalLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left">二级密码配置</el-divider>
		<el-form ref="upgradationFormRef" :model="passwordForm" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="8">
					<el-form-item label="启用密码">
						<el-radio-group v-model="passwordForm.list.open">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="密码">
						<el-input v-model="passwordForm.list.password" placeholder="请输入密码" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="原密码">
						<el-input v-model="passwordForm.password_original" :type="isShowPasswordOriginal ? 'text' : 'password'" autocomplete="new-password" placeholder="请输入密码">
							<template #suffix>
								<i
									class="iconfont el-input__icon login-content-password"
									:class="isShowPasswordOriginal ? 'icon-yincangmima' : 'icon-xianshimima'"
									@click="isShowPasswordOriginal = !isShowPasswordOriginal"
								>
								</i>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item>
						<el-button type="primary" @click="onSubmitPasswordForm" :loading="passwordLoading"> 保存 </el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-card>
</template>

<script lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import { systemConfig, systemConfigSelect } from '/@/api/admin1';

export default {
	name: 'systemBasicConfig',
	setup() {
		const state = reactive({
			isShowPassword: false,
			isShowPasswordOriginal: false,
			material: '',
			basicForm: {
				identification: 'basic',
				name: '基本配置',
				list: {
					balance_payment: 1,
					customer_service: 1,
					apply_credit_card: 1,
					good_sold: 1,
				},
			},
			submitBasicLoading: false,
			passwordForm: {
				identification: 'password',
				password_original: '',
				name: '密码设置',
				list: {
					open: 1,
					password: '',
				},
			},
			passwordLoading: false,
			indexShareForm: {
				identification: 'index_share',
				name: '首页分享图',
				list: { url: '' },
			},
			submitIndexShareLoading: false,
			brandPartyForm: {
				identification: 'brand_party',
				name: '品牌方',
				list: { url: '' },
			},
			submitBrandPartyLoading: false,
			orderForm: {
				identification: 'order',
				name: '订单配置',
				list: {
					ORDERDQ_CREATE: 30,
					ORDERDQ_CREATE_UNIT: 60,
					ORDERDQ_SEND: 7,
					ORDERDQ_SEND_UNIT: 86400,
					ORDERDQ_OVER: 3,
					ORDERDQ_OVER_UNIT: 86400,
					ORDERDQ_AFTER: 3,
					ORDERDQ_AFTER_UNIT: 86400,
					name: {
						ORDERDQ_CREATE: '待付款自动关闭时间',
						ORDERDQ_SEND: '发货后多久自动收货时间',
						ORDERDQ_OVER: '确认收货自动结算时间',
						ORDERDQ_AFTER: '售后的时间',
					},
				},
			},
			submitOrderLoading: false,
			withdrawalForm: {
				identification: 'withdrawal',
				name: '分销商提现',
				list: {
					date: ['3'],
					money: 1,
					rate: 0,
				},
			},
			submitWithdrawalLoading: false,
		});

		const loadingRef = ref(null);
		const imageUploadIndexShareRef = ref(null);
		const imageUploadBrandPartyRef = ref(null);

		onMounted(() => {
			_systemConfigSelect({ identification: 'basic' }, true);
			_systemConfigSelect({ identification: 'index_share' });
			_systemConfigSelect({ identification: 'order' });
			_systemConfigSelect({ identification: 'withdrawal' });
			_systemConfigSelect({ identification: 'brand_party' });
			_systemConfigSelect({ identification: 'password' });
		});

		/********** 点击事件(on开头) **********/
		// 提交基础配置
		const onSubmitBasicForm = () => {
			state.submitBasicLoading = true;
			_systemConfig({
				...state.basicForm,
				list: JSON.stringify(state.basicForm.list),
			});
		};
		// 提交首页分享图
		const onSubmitIndexShareForm = () => {
			state.submitIndexShareLoading = true;
			let listData = {
				url: state.indexShareForm.list.url.replace(import.meta.env.VITE_FILE_API, ''),
			};
			_systemConfig({
				...state.indexShareForm,
				list: JSON.stringify(listData),
			});
		};
		// 品牌方
		const onSubmitBrandPartyForm = () => {
			state.submitBrandPartyLoading = true;
			let listData = {
				url: state.brandPartyForm.list.url.replace(import.meta.env.VITE_FILE_API, ''),
			};
			_systemConfig({
				...state.brandPartyForm,
				list: JSON.stringify(listData),
			});
		};
		// 提交订单配置
		const onSubmitOrderForm = () => {
			state.submitOrderLoading = true;
			let list = state.orderForm.list;
			let listData = {
				...list,
				ORDERDQ_CREATE: list.ORDERDQ_CREATE * list.ORDERDQ_CREATE_UNIT,
				ORDERDQ_SEND: list.ORDERDQ_SEND * list.ORDERDQ_SEND_UNIT,
				ORDERDQ_OVER: list.ORDERDQ_OVER * list.ORDERDQ_OVER_UNIT,
				ORDERDQ_AFTER: list.ORDERDQ_AFTER * list.ORDERDQ_AFTER_UNIT,
			};
			_systemConfig({
				...state.orderForm,
				list: JSON.stringify(listData),
			});
		};
		// 提交分销商提现
		const onSubmitWithdrawalForm = () => {
			state.submitWithdrawalLoading = true;
			let listData = {
				date: state.withdrawalForm.list.date.sort().join(','),
				money: state.withdrawalForm.list.money,
				rate: state.withdrawalForm.list.rate,
			};
			_systemConfig({
				...state.withdrawalForm,
				list: JSON.stringify(listData),
			});
		};
		// 提交密码配置
		const onSubmitPasswordForm = () => {
			if (!state.passwordForm.password_original) {
				ElMessage.warning('请输入旧密码');
				return;
			}
			state.passwordLoading = true;
			_systemConfig({
				...state.passwordForm,
				list: JSON.stringify(state.passwordForm.list),
			});
		};
		/********** 方法事件 **********/
		/********** 网络请求 **********/
		// 查看系统配置
		const _systemConfigSelect = (_data: any, show: boolean = false) => {
			if (show) {
				(loadingRef.value as any) = ElLoading.service({
					lock: true,
					text: '加载中',
					background: 'rgba(0, 0, 0, 0.7)',
				});
			}
			systemConfigSelect(_data)
				.then((res: any) => {
					console.log('查看系统配置', res);
					if (show) {
						(loadingRef.value as any)?.close();
					}
					switch (_data.identification) {
						case 'index_share':
							nextTick(() => {
								(imageUploadIndexShareRef.value as any)?.reset();
							});
							if (Object.keys(res.data.info).length) {
								state.indexShareForm = res.data.info;
							}
							nextTick(() => {
								(imageUploadIndexShareRef.value as any)?.dataLoading();
							});
							break;
						case 'brand_party':
							nextTick(() => {
								(imageUploadBrandPartyRef.value as any)?.reset();
							});
							if (Object.keys(res.data.info).length) {
								state.brandPartyForm = res.data.info;
							}
							nextTick(() => {
								(imageUploadBrandPartyRef.value as any)?.dataLoading();
							});
							break;
						case 'order':
							state.orderForm = {
								...res.data.info,
								list: {
									...res.data.info.list,
									ORDERDQ_CREATE: res.data.info.list.ORDERDQ_CREATE / res.data.info.list.ORDERDQ_CREATE_UNIT,
									ORDERDQ_SEND: res.data.info.list.ORDERDQ_SEND / res.data.info.list.ORDERDQ_SEND_UNIT,
									ORDERDQ_OVER: res.data.info.list.ORDERDQ_OVER / res.data.info.list.ORDERDQ_OVER_UNIT,
									ORDERDQ_AFTER: res.data.info.list.ORDERDQ_AFTER / res.data.info.list.ORDERDQ_AFTER_UNIT,
								},
							};
							break;
						case 'withdrawal':
							state.withdrawalForm = {
								...res.data.info,
								list: {
									date: res.data.info.list.date.split(','),
									money: res.data.info.list.money,
									rate: res.data.info.list.rate,
								},
							};
							break;
						case 'password':
							if (Object.keys(res.data.info).length) {
								state.passwordForm = {
									...res.data.info,
									list: {
										...res.data.info.list,
										password: '',
									},
								};
							}
							break;
						case 'basic':
							if (Object.keys(res.data.info).length) {
								state.basicForm = {
									...res.data.info,
									list: {
										...res.data.info.list,
									},
								};
							}
							break;
					}
				})
				.catch(() => {
					if (show) {
						(loadingRef.value as any)?.close();
					}
				});
		};
		// 系统配置
		const _systemConfig = (_data: object) => {
			systemConfig(_data)
				.then((res: any) => {
					console.log('系统配置', res);
					state.submitBasicLoading = false;
					state.submitIndexShareLoading = false;
					state.submitBrandPartyLoading = false;
					state.submitOrderLoading = false;
					state.submitWithdrawalLoading = false;
					state.passwordLoading = false;
					(loadingRef.value as any) = ElLoading.service({
						lock: true,
						text: '加载中',
						background: 'rgba(0, 0, 0, 0.7)',
					});
					_systemConfigSelect(_data, true);
				})
				.catch(() => {
					state.submitBasicLoading = false;
					state.submitIndexShareLoading = false;
					state.submitBrandPartyLoading = false;
					state.submitOrderLoading = false;
					state.submitWithdrawalLoading = false;
					state.passwordLoading = false;
				});
		};

		return {
			imageUploadIndexShareRef,
			imageUploadBrandPartyRef,
			onSubmitBasicForm,
			onSubmitIndexShareForm,
			onSubmitBrandPartyForm,
			onSubmitOrderForm,
			onSubmitWithdrawalForm,
			onSubmitPasswordForm,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped>
.group__append {
	width: 65px;
}
.w90 {
	width: 90%;
}
</style>
